<template>
	<view class="rezu-box"
		:style="{backgroundImage: 'url(' +infoObj.imgUrl+ ')',backgroundRepeat: 'no-repeat',backgroundPosition: 'center center',backgroundSize: '100% 100%'}">
		<scroll-view scroll-x="true" class="scroll-view" show-scrollbar="false">
			<view class="re_zu" v-for="(pro, index) in productList" :key="index"
				@click="$onTo('/pagesClass-rich/product/product?productId=' + (pro.productId || pro.itemId))">
				<view class="hot" v-show="index<3">
					<text class="hot_nub">{{ index+1 }}</text>
				</view>
				<image style="width: 160rpx;height: 170rpx;display: block;margin: 10rpx auto 0 auto;" :lazy-load="true"
					mode="aspectFit" :webp="true" :src="getFirstImg(pro.src || pro.image)"></image>
				<view class="re_zu_name"><text class="re_zu_nam_text">{{ pro.name }}</text></view>
				<view class="re_zu_n"><text class="re_zu_nl">￥</text>{{ ((pro.lowestSalePrice || pro.price || pro.sale)/pro.dayList[0].day).toFixed(2)}}
					<text class="re_zu_nl" v-if="pro.rentOrPurchase!=2">/天</text>
					<!-- <text class="re_zu_nl" v-else>/起</text> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		request,
		getUserId,
	} from "@/utils";
	import {
		APP_APPID
	} from "../../utils/constant.js"
	export default {
		name: "IndexRezu",
		props: {
			infoObj: {
				type: Object,
				default: {},
			},
			productList: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				hotProList: [],
				appid: APP_APPID,
				style_type: 0,
				appleActiveList: {},
				//热租榜单下导航栏 
				hotcurrent: 0,
				bigTitle: '',
				blackTitle: '',
				redTitle: '',
				blackTitle1: '',
				aaimg: 'https://jjzus.oss-cn-hangzhou.aliyuncs.com/49f0c693fcdd47debc40fdaa7f04fedb.png'
			};
		},
		mounted() {
			console.log('首页传给热销畅版的info', this.infoObj);
			console.log('首页传给热销畅版的product', this.productList);
			// this.jiequTitle(this.infoObj.title)
		},
		created() {},
		methods: {
			getFirstImg(imgsStr) {
				return imgsStr.split(',')[0]
			},
			// 标题截取前四个字
			jiequTitle(str) {
				if (str.length >= 4) {
					this.blackTitle = str.slice(0, 2)
					this.redTitle = str.slice(2, 3)
					this.blackTitle1 = str.slice(3, 4)
					console.log('截取截取截取', this.blackTitle, this.redTitle, this.blackTitle1);
				} else {
					this.bigTitle = str
				}

			}
		},
	};
</script>
<style lang="scss" scoped>
	.rezu-box {
		display: flex;
		align-items: flex-end;
		width: 95%;
		margin: 10rpx auto;
		height: 520rpx;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.scroll-view {
		overflow: hidden;
		white-space: nowrap;
		/*  #ifndef  MP-ALIPAY  */
		margin: 16rpx 20rpx;
		/*  #endif  */
		/*  #ifdef  MP-ALIPAY  */
		margin: 8px 10px;
		/*  #endif  */


		.re_zu {
			background-color: #ffffff;
			border-radius: 20rpx;
			width: 30.7%;
			display: inline-block;
			vertical-align: top;
			position: relative;
			height: 270rpx;
			/*  #ifndef  MP-ALIPAY  */
			margin-right: 25rpx;
			/*  #endif  */
			/*  #ifdef  MP-ALIPAY  */
			margin-right: 30rpx;
			/*  #endif  */

			.hot {
				z-index: 199;
				position: absolute;
				left: 18rpx;
				height: 60rpx;
				width: 34rpx;
				background: url("../../static/RICHindexReZu/RICHhot3.png");
				background-repeat: no-repeat;
				color: white;
				font-size: 20rpx;
				text-align: center;
			}

			.hot_nub {
				font-size: 32rpx;
			}
		}

		.re_zu:nth-of-type(2) .hot {
			background: url("../../static/RICHindexReZu/RICHhot2.png");
			background-repeat: no-repeat;
		}

		.re_zu:first-child .hot {
			background: url("../../static/RICHindexReZu/RICHhot1.png");
			background-repeat: no-repeat;
		}

		.re_zu_name {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			// margin-bottom: 10rpx
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.re_zu_nam_text {
				/*  #ifndef  MP-ALIPAY  */
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				font-family: Arial;
				word-break: break-all;
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				/*  #endif  */

				/*  #ifdef  MP-ALIPAY  */
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				font-family: Arial;
				word-break: break-all;
				/*  #endif  */
			}
		}

		.re_zu_n {
			font-size: 28rpx;
			font-weight: bold;
			color: #e90202;
			text-align: center;
			margin-bottom: 10rpx;

			.re_zu_nl {
				font-size: 22rpx;
			}
		}
	}
</style>